<div>
	<!-- widget content -->
	<div class="widget-body">

		<form action="" method="post" id="checkout-form" class="smart-form">
			<header>
				<h2>
					端口新增
					<button class="close" data-dismiss="modal">x</button>
				</h2>
			</header>
			<fieldset>
				<div id="dialog-alert"></div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>开始端口号</label>
					<section class="col col-8">
						<label class="input"> <input type="text" name="startPort"
							placeholder=" 输入开始端口号" class="required digits">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>结束端口号</label>
					<section class="col col-8">
						<label class="input"> <input type="text" name="endPort"
							placeholder=" 输入结束端口号" class="required digits">
						</label>
					</section>
				</div>
				<div style="display: none;">
					<input type="text" name="site" id="site" value="">
				</div>
			</fieldset>
		</form>


	</div>
	<!-- end widget content -->

</div>
<div class="modal-footer">

	<button type="button" class="btn btn-default btn-sm"
		data-dismiss="modal">取消</button>
	<button type="submit" class="btn btn-primary btn-sm" id="submitbtn">
		保存</button>
</div>

<script>
	pageSetUp();
	
	var pagefunction = function() {
    	var siteid=getSession("siteId");
    	$('#site').val(siteid);
		var errorClass = 'invalid';
		var errorElement = 'em';
		var option = 
				{
					errorClass : errorClass,
					errorElement : errorElement,
					highlight : function(element) {
						$(element).parent().removeClass('state-success')
								.addClass("state-error");
						$(element).removeClass('valid');
					},
					unhighlight : function(element) {
						$(element).parent().removeClass("state-error")
								.addClass('state-success');
						$(element).addClass('valid');

					},
					// Rules for form validation
					// Messages for form validation
					messages : {					
						startPort : {
							required : '请输入开始端口'
						},
						endPort : {
							required : '请输入结束端口'
						}
					},
					errorPlacement : function(error, element) {
						if ($(element).next("div").hasClass("tooltip")) {
							$(element).attr("data-original-title",
									$(error).text()).tooltip("show");
						} else {
							$(element).attr("title", $(error).text()).tooltip(
									"show");
						}
					},
					submitHandler:function(form){
						//在这里生成需要提交的json数据
		            	var data=$('#checkout-form').serializeArray();
		            	data[0].value = parseInt(data[0].value);
		            	data[1].value = parseInt(data[1].value);
		            	var jsonData=arrayToString(data);
		            	//在这里调用ajax方法提交
		            	sendPost("/upm_manager/v1.0/ports", postSuccess,DialogAlert,jsonData, null);
			        }    
				};
		 $('#checkout-form').validate(option);
	};
	loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);
	$('#submitbtn').click(function() {
		DialogAlertClear();
		$('#checkout-form').submit();
	});
	function postSuccess(data){
		$("#addModal").modal('toggle');
    	sendGet("/upm_manager/v1.0/ports?site="+getSession("siteId"),reloadGrid,ListAlert,null);
	}
</script>
